<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }

        .box1 {
            width: 300px;
            padding: 30px 0;
            border: 1px solid red;
        }

        .box2 {
            width: 100px;
            height: 100px;
            margin: auto;
            background-color: black;
        }
    </style>
</head>
<body>
    <!-- height应用 -->

    <!-- 
        overflow属性  处理溢出部分
        visible 溢出部分可见
        hiddin 不可见 隐藏超过边框范围的内容
        scroll 溢出部分出现滚条 不管是否溢出都会出现滚条 右边下边都会出现滚条
        auto 没有溢出就正常显示 溢出出现滚条
    -->

    <!-- 
        必须不设置高度的情况：要求盒子必须自适应内部内容的高度（高度自适应）
        或者设置height的属性是自动的
        height:auto;
    -->
    


    <!-- 居中效果 -->

    <!-- 
        水平居中 text-align：center
        垂直居中 line-height：盒子高度   
                             设置元素内边距上下值相同 左右为0
    -->

    <!-- 元素水平居中 -->
     <!-- 
            子盒子宽度低于父盒子宽度，可以设置子盒子的margin值，水平方向为auto
     -->

    
     <!-- 父子盒模型 -->
      <!-- 
        父模型可以放多个子模型
        子模型的实际占有面积加起来不得大于父模型 五个元素

        子模型不设置width 子模型会自动继承父模型的width元素
      -->
    
    <!-- float:left 按左排列 -->


    <!-- margin塌陷现象 -->
     <!-- 
        同级元素 加载大的那个margin数值
        父子 也会加载大的那个··

        同级元素 解决：直接给任何一个总和需要的距离

        父子元素 解决：添加其他的属性 分开隔开  但是最好还是交给一方来设置 尽量减少对margin的设置 使用父级的padding挤出
     -->

    <div class="box">
        一个div
    </div>
    <span>一个span</span>

    <div class="box1">
        <div class="box2"></div>
    </div>

    
</body>
</html>